<template>
	<view class="zy-column zy-mh-lg" style="margin-top: 20rpx; margin-bottom: 20rpx;">
			<view class="zy-row" v-if="!isInfo">
				<!-- 头像 -->
				<image class="zy-img-circle" mode="aspectFill" :src="item.headPicUrl" @click="toUserInfo"></image>
				<view class="zy-column-center zy-ml">
					<!-- 昵称；vip -->
					<view class="zy-row">
						<view class="zy-text-white-lg-bold">{{item.nick}}</view>
						<image class="zy-icon zy-ml-sm" mode="widthFix" :src="getImageUrl('ic_crown.png')"></image>
						<view class="zy-btn-grey-sm zy-ml-sm">65</view>
					</view>
					<!-- 用户信息 -->
					<view class="zy-text-whitegrey-sm zy-mt-sm">00后 济南市 天蝎座</view>
				</view>
			</view>
			<!-- 内容 -->
			<view class="zy-row-center zy-text-white-lg zy-mt" v-if="isInfo && index==1 && !isVip && item.userId != selfUserId">-成为会员即可看TA 所有照片-</view>
			<!-- 内容 -->
			<view class="zy-text-white-lg zy-mt">{{item.content}}</view>
			<!-- 图片 -->
			<view class="bottom zy-mt" v-if="item.fileUrl" :class="{'zy-blur':isInfo && index>0 && !isVip && item.userId != selfUserId}">
				<view v-if="item.fileUrl.length==1">
					<image class="image-one" :src="item.fileUrl[0]" @click="onPreviewImage(item.fileUrl, 0)">
					</image>
				</view>
				<view v-if="item.fileUrl.length==2">
					<image class="image-two-left" :src="item.fileUrl[0]" @click="onPreviewImage(item.fileUrl, 0)">
					</image>
					<image class="image-two-right" :src="item.fileUrl[1]" @click="onPreviewImage(item.fileUrl, 1)">
					</image>
				</view>
				<view v-if="item.fileUrl.length==3"
					style="display: flex; flex-direction: row; align-items: center;">
					<view class="image-three-left">
						<image class="image-three-top" :src="item.fileUrl[1]"
							@click="onPreviewImage(item.fileUrl, 1)"></image>
						<image class="image-three-bottom" :src="item.fileUrl[2]"
							@click="onPreviewImage(item.fileUrl, 2)"></image>
					</view>
					<image class="image-three-right" :src="item.fileUrl[0]" @click="onPreviewImage(item.fileUrl, 0)">
					</image>
				</view>
				<view v-if="item.fileUrl.length>=4"
					style="display: flex; flex-direction: column; align-items: center;">
					<view class="image-four">
						<image class="image-four-small top-left-radius" :src="item.fileUrl[0]"
							@click="onPreviewImage(item.fileUrl, 0)"></image>
						<image class="image-four-big top-right-radius" :src="item.fileUrl[1]" mode="aspectFill"
							@click="onPreviewImage(item.fileUrl, 1)"></image>
					</view>
					<view class="image-four">
						<image class="image-four-big bottom-left-radius" :src="item.fileUrl[2]" mode="aspectFill"
							@click="onPreviewImage(item.fileUrl, 2)"></image>
						<image class="image-four-small bottom-right-radius" :src="item.fileUrl[3]"
							@click="onPreviewImage(item.fileUrl, 3)"></image>
						<view class="image-other" v-if="item.fileUrl.length>4">+{{item.fileUrl.length - 4}}张 </view>
					</view>
				</view>
			</view>
			<!-- 城市 -->
			<view class="zy-text-yellow-light-sm zy-mt-lg" v-if="item.city">{{item.city}}</view>
			<!-- 时间；点赞数，评论数 -->
			<view class="zy-row-between zy-mt-sm">
				<view class="zy-text-whitegrey">{{stringToText(item.createTime)}}</view>
				<view class="zy-row">
					<view class="zy-row" @click.stop="onGive">
						<zy-icon :url="getImageUrl(item.isGiveStatus==0?'dynamic_love.png': 'dynamic_unlove.png')"></zy-icon>
						<view class='zy-text-white-sm-super'>{{item.giveNum}}</view>
					</view>
					<view class="zy-row zy-ml-lg" @click.stop="onCommont">
						<zy-icon :url="getImageUrl('dynamic_message.png')"></zy-icon>
						<view class='zy-text-white-sm-super'>{{item.commentNum}}</view>
					</view>
				</view>
			</view>
			<zy-line></zy-line>
		</view>
</template>

<script>
	import RouteUtil from '@/main/common/RouteUtil.js';
	import TimeUtil from '@/main/common/TimeUtil.js';
	import CacheUtil from '@/main/common/CacheUtil.js';
	export default {
		name:"dynamic-item",
		data() {
			return {
				isVip:CacheUtil.getVip(),
				selfUserId: CacheUtil.getUserId()
			};
		},
		props:{
			item:{
				type: Object,
				default:()=>{}
			},
			// 是否评论界面
			isCommentPage:{
				type: Boolean,
				default: () => false
			},
			isInfo:{
				type: Boolean,
				default: () => false
			},
			index: {
				type: Number,
				default: () => -1
			},
		},
		methods:{
			stringToText(dataStr){
				return TimeUtil.stringToText(dataStr)
			},
			toUserInfo(){
				RouteUtil.toUserInfo(this.item.txCode)
			},
			onPreviewImage(list, index) {
				if(this.isInfo && this.index>0 && !this.isVip && this.item.userId != this.selfUserId){
					this.$emit('vip', this.item)
				}else{
					uni.previewImage({
						urls: list,
						current: index,
					})
				}
			},
			onGive(){
				uni.$http.get('/api/dynamic/giveDynamic', {dynamicId: this.item.id}).then(res=>{
					if(this.item.isGiveStatus == 0){
						this.item.isGiveStatus = 1;
						this.item.giveNum-=1;
					}else{
						this.item.isGiveStatus = 0;
						this.item.giveNum+=1;
					}
					uni.$toast.showToast(res.message)
				})
			},
			onCommont(){
				if(this.isCommentPage){
					this.$emit('comment', this.item)
				}else{
					RouteUtil.toDynamicComment(this.item)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 690rpx;
		margin-top: 15rpx;

		.image-one {
			width: 460rpx;
			height: auto;
			aspect-ratio: 3 / 4;
		}

		.image-two-left {
			width: 345rpx;
			aspect-ratio: 1;
			height: auto;
		}

		.image-two-right {
			width: 345rpx;
			height: auto;
			aspect-ratio: 1;
		}

		.image-three-right {
			width: 460rpx;
			height: 690rpx;
		}

		.image-three-left {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			.image-three-top{
				width: 230rpx;
				height: 345rpx;
			}

			.image-three-bottom {
				width: 230rpx;
				height: 345rpx;
			}
		}

		.image-four {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;

			.image-four-small {
				width: 230rpx;
				height: 345rpx;
			}

			.image-four-big {
				width: 460rpx;
				height: 345rpx;
			}

			.image-other {
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
				background-color: #222;
				border-radius: 5rpx;
				padding: 8rpx 12rpx;
				font-size: 18rpx;
				color: #fff;
			}
		}

	}
</style>